 <template>
  <div class="dash-board-container">
    <!-- 面板header区域 -->
    <header v-if="true" class="dash-board-header clearfix">
      <!-- header 左侧info -->
      <div class="header-left fl">
        <img class="logo" src="~/assets/images/logo2.png" alt="">
        <div class="header-info">
          <div class="system-info">
            <p>内蒙古高路公司公路综合养护管理平台</p>
            <!-- <p class="system-name">危险源隐患管理子系统</p> -->
          </div>
          <div  class="system-switch-container">
            <img class="to-home-link" src="~/assets/images/home.png" alt="">
            <p class="project-name">内蒙古高路公司公路项目</p>
            <img class="switch-project-icon" src="~/assets/images/arrow.png" alt="">
          </div>
        </div>
      </div>

      <!-- header tab切换 -->
      <div class="header-tab-container">
        <div class="tab-item cursor__pointer" :class="{active: isRisk}" @click="switchTab(0)">风险看板</div>
        <div class="tab-item cursor__pointer" :class="{active: !isRisk}" @click="switchTab(1)">隐患看板</div>
        <div class="tab-item cursor__pointer">管理后台</div>
      </div>

      <div class="header-right fr">
        <!-- 施工天数 -->
        <div v-if="false" class="system-service-time flex align-center">
          安全施工
          <div class="time-container flex align-center">
            <span class="s-time">0</span>
            <span class="s-time">3</span>
            <span class="s-time">6</span>
            <span class="s-time">9</span>
          </div>
          天
        </div>

        <!-- 天气相关 -->
        <div v-if="false" class="weather-container flex align-center">
          <div class="weather-images">
            <img class="block" src="~assets/images/sun.png" alt="">
          </div>
          <div class="weather-info">
            <div class="info-temperature">
              <span class="info-description">多云</span>
              <span class="info-number">35℃ </span>
            </div>
            <div class="info-place">海南省儋州市</div>
          </div>
        </div>

        <!-- 用户登录 -->
        <div class="user-info">
          <img class="block" src="~assets/images/user.png" alt="">
        </div>
      </div>
    </header>

    <!-- 面板内容区域 -->
    <div class="dash-board-content">
      <!-- 左侧 -->
      <div class="board-content-left board-content-aside" :class="{'hidden': expand}">
        <div class="left-top three-height" :class="{'flex-left-one': isRisk, 'active-two': !isRisk}">
          <!-- 工程风险 -->
          <div v-if="isRisk" class="engineering-risk full-height">
            <board-title title="技术状况"/>
            <!-- <div class="risk-echart-container"> -->
              <!-- TODO 替换组件 -->
              <!-- <p style="text-align: center; padding-top: 40px;font-size: 16px;">组件1</p> -->
            <!-- </div> -->
            <!-- <ProjectRisk :chartDataOne1="projectRisk.chartDataOne1" :chartDataOne2="projectRisk.chartDataOne2"
             :nameList="projectRisk.nameList" :pieNameList="projectRisk.pieNameList" :pieData="projectRisk.pieData"></ProjectRisk> -->
            <TechnicalState 
              tid1="echartsRisk1"
              tid2="echartsRisk2"
              :chartDataOne1="technicalState.chartDataOne1" 
              :chartDataOne2="technicalState.chartDataOne2"
              :chartDataOne3="technicalState.chartDataOne3"
              :chartDataOne4="technicalState.chartDataOne4"
              :chartDataOne5="technicalState.chartDataOne5"
              :nameList="technicalState.nameList" 
              :pieNameList="technicalState.pieNameList" 
              :pieData="technicalState.pieData">
             </TechnicalState>
          </div>

          <!-- 隐患数量统计 -->
          <!-- <div v-else class="risk-count full-height">
            <board-title title="隐患数量统计"/>

            <risk-count :data="Json.riskCount"/>
          </div> -->
        </div>

        <div class="left-bottom three-height" >
          <!-- 岗位职责 -->
          <div v-if="isRisk" class="job-responsibility full-height">
            <board-title title="护养资源" :bg-type="1" />
            <YangHuResource  
              :pieNameList="technicalState.pieNameList" 
              :pieData="technicalState.pieData"></YangHuResource>
          </div>

          <!-- 隐患趋势 -->
          <div v-if="false" class="job-responsibility full-height seven-echarts">
            <board-title title="隐患趋势" :bg-type="1" />
            <!-- TODO 替换组件 -->
            <!-- <p style="text-align: center; margin-top: 40px;font-size: 16px; color: #fff;">组件7</p> -->
            <!-- <SevenEchart ></SevenEchart> -->
            <SevenEchart :chartData="sevenData.chartData" :nameList="sevenData.nameList" 
              :hChartData="sevenData.hChartData" :hNameList="sevenData.hNameList" 
              :hChartData2="sevenData.hChartData2" :hNameList2="sevenData.hNameList2"
              :chartDataOne1="sevenData.chartDataOne1"
              :chartDataOne2="sevenData.chartDataOne2"
              :chartDataOne3="sevenData.chartDataOne3"
              :chartDataOne4="sevenData.chartDataOne4"></SevenEchart>
          </div>
        </div>

        <div class="left-bottom four-height" :class="{'half-height': isRisk, 'flex-left-one': !isRisk}">
          <!-- 岗位职责 -->
          <div v-if="isRisk" class="job-responsibility full-height">
            <board-title title="APP在线统计" :bg-type="1" />
            
            <!-- <job-responsibility :data="Json.jobResponsibility" /> -->
            <AppOnline 
              :hChartData="onlineData.hChartData" :hNameList="onlineData.hNameList"
              :pieNameList="onlineData.pieNameList" 
              :pieData="onlineData.pieData"
            ></AppOnline>
          </div>

          <!-- 隐患趋势 -->
          <div v-if="false" class="job-responsibility full-height seven-echarts">
            <board-title title="隐患趋势" :bg-type="1" />
            <!-- TODO 替换组件 -->
            <!-- <p style="text-align: center; margin-top: 40px;font-size: 16px; color: #fff;">组件7</p> -->
            <!-- <SevenEchart ></SevenEchart> -->
            <SevenEchart :chartData="sevenData.chartData" :nameList="sevenData.nameList" 
              :hChartData="sevenData.hChartData" :hNameList="sevenData.hNameList" 
              :hChartData2="sevenData.hChartData2" :hNameList2="sevenData.hNameList2"
              :chartDataOne1="sevenData.chartDataOne1"
              :chartDataOne2="sevenData.chartDataOne2"
              :chartDataOne3="sevenData.chartDataOne3"
              :chartDataOne4="sevenData.chartDataOne4"></SevenEchart>
          </div>
        </div>
      </div>

      <!-- 中间部分 -->
      <div class="board-content-center" :class="{'large': expand}">
        <div class="electronic-sand-box flex-left-one half-height">
          <board-title title="基础路产" :type="1" @expand="expand = !expand" />

          <!-- 电子沙盘的iframe区域 -->
          <div class="sand-box-content">
            <iframe src="" frameborder="0"></iframe>
          </div>
        </div>

        <div v-if="isRisk" class="prevent-control two-height">
          <board-title title="路口评定统计" :type="1" :has-expand="false"/>
          <LuKuang 
            :chartDataOne1="luKuang.chartDataOne1" 
            :chartDataOne2="luKuang.chartDataOne2"
            :chartDataOne3="luKuang.chartDataOne3"
            :chartDataOne4="luKuang.chartDataOne4"
            :chartDataOne5="luKuang.chartDataOne5"
            :chartDataOne11="luKuang.chartDataOne11" 
            :chartDataOne22="luKuang.chartDataOne22"
            :chartDataOne33="luKuang.chartDataOne33"
            :chartDataOne44="luKuang.chartDataOne44"
            :nameList="luKuang.nameList" 
            :pieNameList="luKuang.pieNameList" 
            :pieData="luKuang.pieData">
            </LuKuang>
          <!-- <monitoring-focus :data="Json.preventControl" :expand="expand"/> -->
        </div>

        <div v-if="isRisk" class="three-height">
          <board-title title="交通量水平" :type="1" :has-expand="false"/>
          
          <JiaoTong 
            :chartDataOne1="jiaoTong.chartDataOne1" 
            :nameList="jiaoTong.nameList" 
           >
            </JiaoTong>
          <!-- <monitoring-focus :data="Json.preventControl" :expand="expand"/> -->
        </div>
        

        <!-- <div v-else class="hidden-risk-distribution"> -->
        <div v-if="false" class="hidden-risk-distribution">
          <board-title title="隐患分布状况" :type="1" :has-expand="false"/>

          <risk-distribution :data="Json.riskDistribution"/>
        </div>
      </div>

      <!-- 右侧 -->
      <div class="board-content-right board-content-aside" :class="{'hidden': expand}">
        <div class="right-top flex-left-one">
          <!-- 风险动态 -->
          <div v-if="isRisk" class="risk-dynamics">
            <board-title title="日常养护管理"/>
            <RiChang
              :chartDataOne1="jiaoTong.chartDataOne1" 
              :nameList="jiaoTong.nameList" 
              :pieNameList="luKuang.pieNameList" 
              :pieData="luKuang.pieData"
            >
              <TechnicalState 
                tid1="echartsRisk11"
                tid2="echartsRisk22"
                :chartDataOne1="technicalState.chartDataOne1" 
                :chartDataOne2="technicalState.chartDataOne2"
                :chartDataOne3="technicalState.chartDataOne3"
                :chartDataOne4="technicalState.chartDataOne4"
                :chartDataOne5="technicalState.chartDataOne5"
                :nameList="technicalState.nameList" 
                :pieNameList="technicalState.pieNameList" 
                :pieData="technicalState.pieData">
              </TechnicalState>
            </RiChang>

            <!-- TODO 替换组件 -->
            <!-- <p style="text-align: center; margin-top: 40px;font-size: 16px; color: #fff;">组件4</p> -->
            <!-- <DynamicRick :liveData="dynamicRick.liveData" :nameList="dynamicRick.nameList"
            :chartDataOne1="dynamicRick.chartDataOne1"
            :chartDataOne2="dynamicRick.chartDataOne2"
            :chartDataOne3="dynamicRick.chartDataOne3"
            :chartDataOne4="dynamicRick.chartDataOne4"
            ></DynamicRick> -->
          </div>

          <!-- 风险隐患归属统计动态 -->
          <!-- <div v-else class="risk-dynamics"> -->
          <div v-if="false" class="risk-dynamics">
            <board-title title="隐患归属统计"/>

            <!-- TODO 替换组件 -->
            <!-- <p style="text-align: center; margin-top: 40px;font-size: 16px; color: #fff;">组件9</p> -->
            <NiceEchart :chartData="niceData.chartData" :nameList="niceData.nameList" :hChartData="niceData.hChartData" :hNameList="niceData.hNameList"></NiceEchart>
          </div>
        </div>

        <div class="right-bottom three-height">
          <!-- 风险告知 -->
          <div v-if="isRisk" class="risk-notification full-height">
            <board-title title="养护工程管理" :bg-type="1"/>
            <YangHuPro></YangHuPro>
            <!-- TODO 替换组件 -->
            <!-- <p style="text-align: center; margin-top: 40px;font-size: 16px; color: #fff;">组件5</p> -->
            <!-- <FiveEchart :chartData="fiveData.chartData" :nameList="fiveData.nameList"></FiveEchart> -->
          </div>

          <!-- 隐患类型排行 -->
          <!-- <div v-else class="risk-notification full-height"> -->
          <div v-if="false" class="risk-notification full-height">
            <board-title title="隐患类型排行" :bg-type="1"/>

            <!-- TODO 替换组件 -->
            <!-- <p style="text-align: center; margin-top: 40px;font-size: 16px; color: #fff;">组件10</p> -->
            <!-- <TenEchart ></TenEchart> -->
            <TenEchart :chartData="tenData.chartData" :nameList="tenData.nameList"></TenEchart>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // TODO-lc 假数据接口，需要替换为真的
  import Json from '@/json/index';
  import jobResponsibility from './components/JobResponsibility';
  import riskCount from './components/RiskCount';
  import MonitoringFocus from  './components/MonitoringFocus';
  import RiskDistribution from './components/RiskDistribution';
  import boardTitle from '@/components/boardTitle';
  import FiveEchart from './components/FiveEchart';
  import SevenEchart from './components/SevenEchart';
  import NiceEchart from './components/NiceEchart';
  // import ProjectRisk from './components/2/ProjectRisk';
  import DynamicRick from './components/DynamicRick';
  import TenEchart from './components/TenEchart';
  import fiveData from '../jsonData/fiveData';
  import niceData from '../jsonData/niceData';
  import sevenData from '../jsonData/sevenData';
  import tenData from '../jsonData/tenData';
  import projectRisk from '../jsonData/projectRisk';
  import dynamicRick from '../jsonData/dynamicRick';

  import TechnicalState from './components/2/TechnicalState';
  import YangHuResource from './components/2/YangHuResource';
  import AppOnline from './components/2/AppOnline';
  import LuKuang from './components/2/LuKuang';
  import JiaoTong from './components/2/JiaoTong';
  import RiChang from './components/2/RiChang';
  import YangHuPro from './components/2/YangHuPro';


  
  import technicalState from '../jsonData/technicalState'
  import onlineData from '../jsonData/onlineData'
  import luKuang from '../jsonData/luKuang'
  import jiaoTong from '../jsonData/jiaoTong'

  

  export default {
    data () {
      return {
        expand: false,
        activeTab: 0,
        fiveData: {},
        niceData: {},
        sevenData: {},
        tenData: {},
        projectRisk: {},
        dynamicRick: {},
        Json,

        technicalState: {},
        onlineData:{},
        luKuang: {},
        jiaoTong: {}
      }
    },
    computed: {
      isRisk () {
        return this.activeTab === 0;
      },
    },
    created() {
      this.fiveData = fiveData
      this.niceData = niceData
      this.sevenData = sevenData
      this.tenData = tenData
      this.projectRisk = projectRisk
      this.dynamicRick = dynamicRick

      this.technicalState = technicalState
      this.onlineData = onlineData
      this.luKuang = luKuang
      this.jiaoTong = jiaoTong
    },
    components: {
      boardTitle,
      jobResponsibility,
      riskCount,
      MonitoringFocus,
      RiskDistribution,
      FiveEchart,
      SevenEchart,
      NiceEchart,
      // ProjectRisk,
      DynamicRick,
      TenEchart,

      TechnicalState,
      YangHuResource,
      AppOnline,
      LuKuang,
      JiaoTong,
      RiChang,
      YangHuPro
    },
    methods: {
      switchTab (tab) {
        const t = this;

        t.activeTab = tab;
      }
    }
  }
</script>

<style lang="scss">
  .dash-board-container {
    box-sizing: border-box;
    height: 100vh;
    padding: 10px 10px 5px;
    box-sizing: border-box;

    .dash-board-header {
      position: relative;
      height: 50px;
      background-image: url("~assets/images/header-bg.png");
      background-size: 100% 100%;
      color: #fff;

      .header-left {
        display: flex;
        align-items: center;
        height: 50px;
        margin-left: 18px;

        .logo {
          width: 33px;
          height: 35px;
        }

        .header-info {
          margin-left: 16px;
          height: auto;
          align-self: flex-start;

          .system-info {
            display: flex;
            align-items: center;
            margin-top: 6px;
            font-size: 12px;
            color: #fff;

            .system-name {
              margin-left: 8px;
              padding: 0 12px;
              font-size: 6px;
              color: #DEF1FF;
              font-style: italic;
              background-image: url("~assets/images/system-name.png");
              background-size: 100% 100%;
            }
          }

          .system-switch-container {
            display: flex;
            align-items: center;
            margin-top: 6px;

            .to-home-link {
              width: 10px;
              height: 10px;
            }

            .project-name {
              margin: 0 3px 0 5px;
              font-size: 7px;
            }

            .switch-project-icon {
              width: 6px;
              height: 3px;
            }
          }
        }
      }

      .header-tab-container {
        display: flex;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);

        .tab-item {
          width: 77px;
          height: 27px;
          background-image: url("~assets/images/nav.png");
          background-size: 100% 100%;
          font-size: 8px;
          text-align: center;
          line-height: 27px;

          &.active {
            background-image: url("~assets/images/nav-active.png");
          }
        }
      }

      .header-right {
        height: 50px;
        display: flex;
        align-items: flex-end;
        font-size: 7px;

        .system-service-time {
          padding: 0 20px;
          margin-bottom: 4px;
          background-image: url("~assets/images/sys-time-bg.png");
          background-size: 100% 100%;

          .time-container {
            margin: 2px 4px;

            .s-time {
              display: inline-block;
              width: 16px;
              margin-right: 2px;
              font-family: 'digital';
              font-size: 12px;
              line-height: 19px;
              text-align: center;
              background-image: url("~assets/images/time-bg.png");
              background-size: 100% 100%;
            }
          }
        }

        .weather-container {
          margin:0 46px 4px 25px;

          .weather-images {
            width: 32px;
            height: 24px;
            margin-right: 2px;
          }
        }

        .user-info {
          width: 29px;
          height: 28px;
          margin-right: 12px;
          align-self: center;
        }
      }
    }

    .dash-board-content {
      position: relative;
      height: calc(100vh - 71px);
      // height: calc(100vh - 15px);
      margin-top: 6px;

      .board-content-aside {
        position: absolute;
        height: 100%;
        top: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        width: 280px;
        background-image: url("~assets/images/board-left-bg.png");
        background-size: 100% 100%;
      }

      .board-content-left {
        left: 0;

        .left-top.active-two {
          height: 150px;
        }

        /** 左侧内容区域的内容块 **/
        .engineering-risk {
          position: relative;

          .risk-echart-container {
            font-size: 12px;
            color: #fff;
          }
        }

        .job-responsibility {
          position: relative;
          overflow: auto;
        }
      }

      .board-content-center {
        display: flex;
        flex-direction: column;
        height: 100%;
        margin: 0 306px;
        padding: 0 5px;
        border: 1px solid #2A8CFA;

        &.large {
          margin: 0;
        }

        .prevent-control, .hidden-risk-distribution {
          height: 145px;
        }
      }

      .board-content-right {
        right: 0;

        .right-bottom.active-one {
          height: 150px;
        }
      }
    }
  }
</style>
